<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>Sublime使用详细总结 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="sublime,">
  

  <meta name="description" content="Sublime使用详细总结">
<meta name="keywords" content="sublime">
<meta property="og:type" content="article">
<meta property="og:title" content="Sublime使用详细总结">
<meta property="og:url" content="http://blog.poetries.top/2016/03/14/Sublime使用详细总结/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="Sublime使用详细总结">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://www.haorooms.com/uploads/images/sublime.jpg">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/emmet.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/jsFormat.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/less.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/align.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/prefixer.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/keyboard.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/highlight.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/git.png">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/jquery.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/basic.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/function-template.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/i5KI6SBAfs7Qk.png">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/iY1DDCRG5TsyR.png">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/uy67y.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/autofilename.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/ZCFcC.png">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/c1608aa0gw1e9dmrd3vxpg209y08d75x.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/spac.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/diff.gif">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/zxdcsaf.jpg">
<meta property="og:image" content="http://www.xuanfengge.com/wp-content/uploads/2013/12/cb42e7cddad0c04794b783742ee8f2085e95295a.png">
<meta property="og:image" content="http://www.jeffjade.com/img/toss/sublimetext-folder.png">
<meta property="og:image" content="http://7xoosr.com1.z0.glb.clouddn.com/WakaTime.jpg">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/sublime%E5%BF%AB%E6%8D%B7%E9%94%AE.jpg">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070241_RMc4.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070243_tEzd.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070244_Gl7v.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070246_chdY.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070247_2zco.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070249_PVaA.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070251_sQge.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070252_MIhr.png">
<meta property="og:image" content="http://static.oschina.net/uploads/img/201409/12070254_kAXO.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.902Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Sublime使用详细总结">
<meta name="twitter:description" content="Sublime使用详细总结">
<meta name="twitter:image" content="http://www.haorooms.com/uploads/images/sublime.jpg">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Sublime使用详细总结"><span class="toc-text">Sublime使用详细总结</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#一、Sublime-Text-2和3的对比"><span class="toc-text">一、Sublime Text 2和3的对比</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二、Sublime-Text-3安装插件"><span class="toc-text">二、Sublime Text 3安装插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三、Sublime-Text-3插件推荐"><span class="toc-text">三、Sublime Text 3插件推荐</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实用的sublime插件集合"><span class="toc-text">实用的sublime插件集合</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#其他插件"><span class="toc-text">其他插件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#四、定制属于自己的快捷键"><span class="toc-text">四、定制属于自己的快捷键</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#sublime中的vim模式配置："><span class="toc-text">sublime中的vim模式配置：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#五、定制属于自己的个性化主题"><span class="toc-text">五、定制属于自己的个性化主题</span></a></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-Sublime使用详细总结" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">Sublime使用详细总结</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.03.14</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/工欲善其事必先利其器/">工欲善其事必先利其器</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 4.6k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 17分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h1 id="Sublime使用详细总结"><a href="#Sublime使用详细总结" class="headerlink" title="Sublime使用详细总结"></a>Sublime使用详细总结</h1><a id="more"></a>
<hr>
<blockquote>
<p>【导读】 Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，多重选择，快捷命令等。SublimeText更妙的是它的可扩展性。SublimeText：一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制，用她来写代码，绝对是一种享受。相比于难于上手的Vim，浮肿沉重的Eclipse，VS，即便体积轻巧迅速启动的Editplus、Notepad++，在SublimeText面前大略显失色，无疑这款性感无比的编辑器是Coding和Writing最佳的选择，没有之一。</p>
</blockquote>
<h3 id="一、Sublime-Text-2和3的对比"><a href="#一、Sublime-Text-2和3的对比" class="headerlink" title="一、Sublime Text 2和3的对比"></a><strong>一、Sublime Text 2和3的对比</strong></h3><blockquote>
<p>相比于2，Sublime Text 3就秒启动一项，就压倒性地胜利了。因此在之后的叙述中都以Sublime Text 3为主角。并且3一直在不断的完善更新，具体的差异可参看Sublime Blog.简单的说：</p>
</blockquote>
<ul>
<li>ST3支持在项目目录里面寻找变量</li>
<li>提供了对标签页更好地支持（更多的命令和快捷键）</li>
<li>加快了程序运行的速度</li>
<li>更新了API，使用Python3.3</li>
</ul>
<p>强烈推荐朋友们使用3! 唯快不破，不解释</p>
<h3 id="二、Sublime-Text-3安装插件"><a href="#二、Sublime-Text-3安装插件" class="headerlink" title="二、Sublime Text 3安装插件"></a><strong>二、Sublime Text 3安装插件</strong></h3><p> Sublime Text的强大就是她拥有强大的课可扩展性。您可根据自己的需要安装不同的插件；这使得她变的无比强大的同时又不失轻便。</p>
<ul>
<li>插件安装方式一：直接安装：<br>安装Sublime text3插件很方便，可以直接下载安装包解压缩到Packages目录（菜单-&gt;preferences-&gt;packages）。</li>
</ul>
<hr>
<ul>
<li>插件安装方式二：使用Package Control组件安装：<br>按Ctrl+`调出console（注：安装有QQ输入法的这个快捷键会有冲突的，输入法属性设置-输入法管理-取消热键切换至QQ拼音）粘贴以下代码到底部命令行并回车：<br>如果是text2输入如下命令：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import urllib2,os,hashlib; h = &apos;7183a2d3e96f11eeadd761d777e62404&apos; + &apos;e330c659d4bb41d3bdf022e94cab3cd0&apos;; pf = &apos;Package Control.sublime-package&apos;; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( &apos;http://sublime.wbond.net/&apos; + pf.replace(&apos; &apos;, &apos;%20&apos;)).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), &apos;wb&apos; ).write(by) if dh == h else None; print(&apos;Error validating download (got %s instead of %s), please try manual install&apos; % (dh, h) if dh != h else &apos;Please restart Sublime Text to finish installation&apos;)</span><br></pre></td></tr></table></figure>
<p>如果是text3输入如下命令：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import urllib.request,os,hashlib; h = &apos;7183a2d3e96f11eeadd761d777e62404&apos; + &apos;e330c659d4bb41d3bdf022e94cab3cd0&apos;; pf = &apos;Package Control.sublime-package&apos;; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( &apos;http://sublime.wbond.net/&apos; + pf.replace(&apos; &apos;, &apos;%20&apos;)).read(); dh = hashlib.sha256(by).hexdigest(); print(&apos;Error validating download (got %s instead of %s), please try manual install&apos; % (dh, h)) if dh != h else open(os.path.join( ipp, pf), &apos;wb&apos; ).write(by)</span><br></pre></td></tr></table></figure>
<p>重启Sublime Text 3。如果在Perferences-&gt;package settings中看到package control这一项，则安装成功。按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。</p>
<p>安装好了之后，在Preferences会看到package control，如下:</p>
<p><img src="http://www.haorooms.com/uploads/images/sublime.jpg" alt="此处输入图片的描述"></p>
<p>PS：国内使用SublimeText3，经常可能遇到无法安装可用插件问题，可remove掉Package Control重新安装下；如遇到连PackageControl也无法安装，则可以在别处拷贝一份关于Package Control的文件－(Package Control.sublime-package)存放于Installed Packages目录之下即可</p>
<h3 id="三、Sublime-Text-3插件推荐"><a href="#三、Sublime-Text-3插件推荐" class="headerlink" title="三、Sublime Text 3插件推荐"></a><strong>三、Sublime Text 3插件推荐</strong></h3><p>无插件，不神器！根据自己的需要定制属于自己的强大插件集；下面是一些常用的推荐。<br><a href="http://www.jianshu.com/p/5905f927d01b" target="_blank" rel="noopener">Sublime Text3插件：增强篇</a><br><a href="http://www.open-open.com/news/view/26d731" target="_blank" rel="noopener">20个强大的SublimeText插件</a></p>
<h3 id="实用的sublime插件集合"><a href="#实用的sublime插件集合" class="headerlink" title="实用的sublime插件集合"></a>实用的sublime插件集合</h3><ul>
<li><strong><a href="https://sublime.wbond.net/packages/Emmet" target="_blank" rel="noopener">Emmet</a></strong></li>
</ul>
<p>功能：编码快捷键，前端必备</p>
<p>简介：Emmet作为zen coding的升级版，对于前端来说，可是必备插件，如果你对它还不太熟悉，可以在其官网（<a href="http://docs.emmet.io/）上看下具体的演示视频。" target="_blank" rel="noopener">http://docs.emmet.io/）上看下具体的演示视频。</a></p>
<p>使用：教程-<a href="http://docs.emmet.io/cheat-sheet/、http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/" target="_blank" rel="noopener">http://docs.emmet.io/cheat-sheet/、http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/</a></p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/emmet.gif" alt="此处输入图片的描述"></p>
<ul>
<li><a href="https://sublime.wbond.net/packages/JsFormat" target="_blank" rel="noopener"><strong>JSFormat</strong></a></li>
</ul>
<p>功能：Javascript的代码格式化插件</p>
<p>简介：很多网站的JS代码都进行了压缩，一行式的甚至混淆压缩，这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理，包括换行和缩进等等，是代码一目了然，更快读懂~</p>
<p>使用：在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F）</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/jsFormat.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/LESS" target="_blank" rel="noopener">LESS</a></strong></li>
</ul>
<p>功能：LESS高亮插件</p>
<p>简介：用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们</p>
<p>使用：打开.less文件或者设置为less格式</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/less.gif" alt="此处输入图片的描述"></p>
<ul>
<li><a href="https://sublime.wbond.net/packages/Less2Css" target="_blank" rel="noopener"><strong>Less2CSS</strong></a></li>
</ul>
<p>功能：编译Less</p>
<p>简介：监测到文件改动时，编译保存为.css文件</p>
<p>使用：打开.less文件，编写代码保存即可看到同时生成.css的文件，如果没有则需要安装node。不推荐用这种方法编译，要么用koala，要么就用grunt编译。</p>
<ul>
<li><strong><a href="https://github.com/wbond/sublime_alignment" target="_blank" rel="noopener">Alignment</a></strong></li>
</ul>
<p>功能：”=”号对齐</p>
<p>简介：变量定义太多，长短不一，可一键对齐</p>
<p>使用：默认快捷键Ctrl+Alt+A和QQ截屏冲突，可设置其他快捷键如：Ctrl+Shift+Alt+A；先选择要对齐的文本</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/align.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/Autoprefixer" target="_blank" rel="noopener">sublime-autoprefixer</a></strong></li>
</ul>
<p>功能：CSS添加私有前缀</p>
<p>简介：CSS还未标准化，所以要给各大浏览器一个前缀以解决兼容问题</p>
<p>使用：Ctrl+Shift+P，选择autoprefixer即可。需要安装node.js。</p>
<p>其他设置如快捷键请参考：<a href="https://sublime.wbond.net/packages/Autoprefixer" target="_blank" rel="noopener">https://sublime.wbond.net/packages/Autoprefixer</a></p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/prefixer.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://github.com/kemayo/sublime-text-2-clipboard-history" target="_blank" rel="noopener">Clipboard History</a></strong></li>
</ul>
<p>功能：粘贴板历史记录</p>
<p>简介：方便使用复制/剪切的内容</p>
<p>使用：</p>
<p>Ctrl+alt+v：显示历史记录<br>Ctrl+alt+d：清空历史记录<br>Ctrl+shift+v：粘贴上一条记录（最旧）<br>Ctrl+shift+alt+v：粘贴下一条记录（最新）</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/keyboard.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://github.com/facelessuser/BracketHighlighter" target="_blank" rel="noopener">Bracket Highlighter</a></strong></li>
</ul>
<p>功能：代码匹配</p>
<p>简介：可匹配[], (), {}, “”, ”, <tag></tag>，高亮标记，便于查看起始和结束标记</p>
<p>使用：点击对应代码即可</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/highlight.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://github.com/kemayo/sublime-text-git" target="_blank" rel="noopener">Git</a></strong></li>
</ul>
<p>功能：git管理</p>
<p>简介：插件基本上实现了git的所有功能</p>
<p>使用：<a href="https://github.com/kemayo/sublime-text-git/wiki" target="_blank" rel="noopener">https://github.com/kemayo/sublime-text-git/wiki</a></p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/git.png" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://github.com/mrmartineau/Jquery" target="_blank" rel="noopener">jQuery</a></strong></li>
</ul>
<p>功能：jQ函数提示</p>
<p>简介：快捷输入jQ函数，是偷懒的好方法</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/jquery.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/DocBlockr" target="_blank" rel="noopener">Doc​Blockr</a></strong></li>
</ul>
<p>功能：生成优美注释</p>
<p>简介：标准的注释，包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦</p>
<p>使用：输入/*、/**然后回车，还有很多用法，请参照</p>
<p><a href="https://sublime.wbond.net/packages/DocBlockr" target="_blank" rel="noopener">https://sublime.wbond.net/packages/DocBlockr</a></p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/basic.gif" alt="此处输入图片的描述"><br><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/function-template.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/ColorPicker" target="_blank" rel="noopener">Color​Picker</a></strong></li>
</ul>
<p>功能：调色板</p>
<p>简介：需要输入颜色时，可直接选取颜色</p>
<p>使用：快捷键Windows: ctrl+shift+c</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/i5KI6SBAfs7Qk.png" alt="此处输入图片的描述"><br><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/iY1DDCRG5TsyR.png" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/ConvertToUTF8" target="_blank" rel="noopener">ConvertToUTF8</a></strong></li>
</ul>
<p>功能：文件转码成utf-8</p>
<p>简介：通过本插件，您可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。</p>
<p>使用：安装插件后自动转换为utf-8格式</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/uy67y.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/AutoFileName" target="_blank" rel="noopener">AutoFileName</a></strong></li>
</ul>
<p>功能：快捷输入文件名</p>
<p>简介：自动完成文件名的输入，如图片选取</p>
<p>使用：输入”/”即可看到相对于本项目文件夹的其他文件</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/autofilename.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/Nodejs" target="_blank" rel="noopener">Nodejs</a></strong></li>
</ul>
<p>功能：node代码提示</p>
<p>教程：<a href="https://sublime.wbond.net/packages/Nodejs" target="_blank" rel="noopener">https://sublime.wbond.net/packages/Nodejs</a></p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/ZCFcC.png" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="http://t.cn/zYDBkjL" target="_blank" rel="noopener">IMESupport</a></strong></li>
</ul>
<p>功能：sublime中文输入法</p>
<p>简介：还在纠结 Sublime Text 中文输入法不能跟随光标吗？试试「IMESupport 」这个插件吧！目前只支持 Windows，在搜索等界面不能很好的跟随光标。</p>
<p>使用：Ctrl + Shift + P →输入pci →输入IMESupport →回车</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/c1608aa0gw1e9dmrd3vxpg209y08d75x.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://github.com/SublimeText/TrailingSpaces" target="_blank" rel="noopener">Trailing spaces</a></strong></li>
</ul>
<p>功能：检测并一键去除代码中多余的空格</p>
<p>简介：还在纠结代码中有多余的空格而显得代码不规范？或是有处女座情节？次插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格，让你的代码规范清爽起来</p>
<p>使用：安装插件并重启，即可自动提示多余空格。一键删除多余空格：CTRL+SHITF+T（需配置），更多配置请点击标题。快捷键配置：在Preferences / Key Bindings – User加上代码（数组内）</p>
<pre><code>{ &quot;keys&quot;: [&quot;ctrl+shift+t&quot;], &quot;command&quot;: &quot;delete_trailing_spaces&quot; }
</code></pre><p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/spac.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://github.com/colinta/SublimeFileDiffs" target="_blank" rel="noopener">FileDiffs</a></strong></li>
</ul>
<p>功能：强大的比较代码不同工具</p>
<p>简介：比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具，精确到行。</p>
<p>使用：右键标签页，出现FileDiffs Menu或者Diff with Tab…选择对应文件比较即可</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/diff.gif" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="https://sublime.wbond.net/packages/GBK%20Encoding%20Support" target="_blank" rel="noopener">GBK Encoding Support</a></strong></li>
</ul>
<p>功能：中文识别</p>
<p>简介：Sublime Text 2可识别UTF-8格式的中文，不识别GBK和ANSI，因此打开很多含中文的文档都会出现乱码。可以通过安装插件GBK Support,来识别GBK和ANSI。</p>
<p>使用：</p>
<p>Open a GBK File<br>Save file with GBK encoding<br>Change file encoding from utf8 to GBK or GBK to utf8</p>
<p><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/zxdcsaf.jpg" alt="此处输入图片的描述"></p>
<ul>
<li><p><a href="https://packagecontrol.io/packages/GitGutter" target="_blank" rel="noopener"><strong>Git​Gutter</strong></a></p>
<p>简介：指示代码中插入、修改、删除的地方<br><img src="http://www.xuanfengge.com/wp-content/uploads/2013/12/cb42e7cddad0c04794b783742ee8f2085e95295a.png" alt="此处输入图片的描述"></p>
</li>
</ul>
<h3 id="其他插件"><a href="#其他插件" class="headerlink" title="其他插件"></a>其他插件</h3><ul>
<li>AutoFileName</li>
<li>SublimeLinter-json</li>
<li>SublimeLinter-jslint</li>
<li>SublimeLinter-html-tidy</li>
<li>SideBarEnhancements</li>
<li>Terminal</li>
<li>Highlighter</li>
<li>Color Highlighter</li>
<li>HTMLAttributes</li>
<li>StringEncode</li>
<li>HTML-CSS-JS Prettify</li>
</ul>
<ul>
<li><a href="https://github.com/SublimeText-Markdown/MarkdownEditing" target="_blank" rel="noopener"><strong>MarkDown Editing</strong></a></li>
</ul>
<p>SublimeText不仅仅是能够查看和编辑 Markdown 文件，但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。</p>
<p>关于如何在SublimeText下高效些东西可参见文章：<a href="http://www.cnblogs.com/jadeboy/p/4165449.html" target="_blank" rel="noopener">sublime text 2(3)下的Markdown写作</a> 抑或是<a href="http://www.jeffjade.com/2015/08/28/2015-08-28-Write-Morkdown/" target="_blank" rel="noopener">追寻高效工作的一路折腾㈡</a></p>
<ul>
<li><a href="https://github.com/titoBouzout/SideBarFolders" target="_blank" rel="noopener"><strong>SideBarFolders</strong></a></li>
</ul>
<p>打开的文件夹都太多了? 来用这个来管理文件夹，世界原来也可以这么美好。<br><img src="http://www.jeffjade.com/img/toss/sublimetext-folder.png" alt="此处输入图片的描述"></p>
<ul>
<li><strong><a href="http://wbond.net/sublime_packages/terminal" target="_blank" rel="noopener">Sublime Terminal</a></strong></li>
</ul>
<p>这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹，并支持使用快捷键。</p>
<ul>
<li><strong><a href="https://github.com/wuub/SublimeREPL" target="_blank" rel="noopener">SublimeREPL</a></strong></li>
</ul>
<p>这可能是对程序员很有用的插件。SublimeREPL 允许你在 Sublime Text 中运行各种语言（NodeJS ， Python，Ruby， Scala 和 Haskell 等等）。</p>
<ul>
<li><strong><a href="https://github.com/SublimeText/CTags" target="_blank" rel="noopener">Ctags插件</a></strong></li>
</ul>
<p>有童鞋抱怨Sublime Text不能支持函数的跳转（比如像Eclipse那样，按住Control点击该方法或者对象，即可跳转到定义的地方； Alt+←即可回到原处）。其实Sublime Text也可以借助插件实现之（当然，有些情况下:Can not find defination）毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦，具体的可以参见:<a href="http://firstleaf.diandian.com/post/2013-03-29/40049695682" target="_blank" rel="noopener">Sublime Text ctags 的配置.</a></p>
<ul>
<li><strong><a href="https://github.com/SublimeLinter" target="_blank" rel="noopener">SublimeLinter插件</a></strong></li>
</ul>
<p>SublimeLinter 是前端编码利器——<a href="http://www.cnblogs.com/lhb25/archive/2012/12/28/best-tools-for-web-development-b.html" target="_blank" rel="noopener">Sublime Text</a> 的一款插件，用于高亮提示用户编写的代码中存在的不规范和错误的写法，支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS &amp; CSS 校验。<br>比如写例如像lua这样的弱语言脚本代码，有这个可以规避掉很多不该有的低级错误吧？当然这也需要你SublimeLinter安装完毕之后再安装一个</p>
<blockquote>
<p>SublimeLinter-lua</p>
</blockquote>
<p>即可。具体的使用可以参见：借助 <a href="http://www.cnblogs.com/lhb25/archive/2013/05/02/sublimelinter-for-js-css-coding.html" target="_blank" rel="noopener">SublimeLinter 编写高质量的 JavaScript &amp; CSS 代码</a></p>
<ul>
<li><strong><a href="https://github.com/titoBouzout/SideBarEnhancements" target="_blank" rel="noopener">SideBarEnhancements插件</a></strong></li>
</ul>
<p>SideBarEnhancements是一款很实用的右键菜单增强插件；在安装该插件前，在Sublime Text左侧FOLDERS栏中点击右键，只有寥寥几个简单的功能；安装了就相当于给其丰了大胸一般。<br>更强大的是，该插件还能让我们自定义快捷键呼出某个浏览器以预览页面！这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。<br>安装此插件后，点击菜单栏的preferences-&gt;package setting-&gt;side bar-&gt;Key Building-User，键入以下代码：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[   </span><br><span class="line">    &#123; &quot;keys&quot;: [&quot;ctrl+shift+c&quot;], &quot;command&quot;: &quot;copy_path&quot; &#125;,</span><br><span class="line">    //chrome</span><br><span class="line">    &#123; &quot;keys&quot;: [&quot;f2&quot;], &quot;command&quot;: &quot;side_bar_files_open_with&quot;,</span><br><span class="line">            &quot;args&quot;: &#123;</span><br><span class="line">                &quot;paths&quot;: [],</span><br><span class="line">                &quot;application&quot;: &quot;C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe&quot;,</span><br><span class="line">                &quot;extensions&quot;:&quot;.*&quot;</span><br><span class="line">            &#125;</span><br><span class="line">     &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>这里设置按Ctrl+Shift+C复制文件路径，按F2即可在Chrome浏览器预览效果(如果需要的话，也可以根据自己的需要为Firefox，Safari，IE，Opera等加上)，当然你也可以自己定义喜欢的快捷键，最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。</p>
<ul>
<li><strong><a href="https://github.com/victorporof/Sublime-HTMLPrettify" target="_blank" rel="noopener">HTML-CSS-JS Prettify</a></strong></li>
</ul>
<p>一款集成了格式化（美化）html、css、js三种文件类型的插件，即便html,js写在PHP文件之内。插件依赖于nodejs，因此需要事先安装nodejs，然后才可以正常运行。插件安装完成后，快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意，但还可以，后面将说明如何修改css美化脚本。本人用起来超级爽的，鉴于篇幅，就不赘述，可以参见<strong><a href="http://frontenddev.org/article/sublime-does-text-three-plug-ins-html-and-css-js-prettify.html" target="_blank" rel="noopener">这篇</a></strong>介绍。</p>
<ul>
<li><strong><a href="https://github.com/csscomb/CSScomb-for-Sublime" target="_blank" rel="noopener">CSScomb CSS属性排序:</a></strong></li>
</ul>
<p>有时候看看自己写的CSS文件，会不会觉得属性很乱查找不易维护难？CSScomb可以按照一定的CSS属性排序规则，将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码，按Ctrl+Shift+C，即可对CSS属性重新排序了，代码从此简洁有序易维护，如果不款选代码则插件将排序文件中所有的CSS属性。当然，可以自己自定义CSS属性排序规则，打开插件目录里的CSScomb.sublime-settings文件，更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的，要使他工作需要在环境变量中添加PHP的路径，具体请看github上的说明。</p>
<ul>
<li><strong><a href="https://github.com/kairyou/SublimeTmpl" target="_blank" rel="noopener">SublimeTmpl 快速生成文件模板</a></strong></li>
</ul>
<p>一直都很奇怪为什么sublime text 3没有新建文件模板的功能，像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了，SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。<br>SublimeTmpl默认的快捷键:</p>
<blockquote>
<p>ctrl+alt+h html<br>ctrl+alt+j javascript<br>ctrl+alt+c css<br>ctrl+alt+p php<br>ctrl+alt+r ruby<br>ctrl+alt+shift+p python</p>
</blockquote>
<ul>
<li><strong><a href="https://github.com/Pleasurazy/Sublime-JavaScript-API-Completions" target="_blank" rel="noopener">Javascript-API-Completions:</a></strong></li>
</ul>
<p>支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件，是少数支持sublime text 3的后缀提示的插件，HTML5标签提示sublime text3自带，不过JQuery提示还是很有用处的，也可设置要提示的语言。</p>
<p><strong><a href="https://wakatime.com/" target="_blank" rel="noopener">WakaTime</a></strong> — 记录你的Code时间;<br>WakaTime可以做到精确地统计到你花在某个项     目上的时间;WakaTime针对不同的IDE，拥有不同的<a href="https://wakatime.com/help/plugins/sublime" target="_blank" rel="noopener">插件</a>，在Sublime上安装着插件，就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间</p>
<blockquote>
<p>Waka的基本设计和rescuetime类似。每个人注册完将获取一个key，装一个客户端，把key输进去（登陆是同一个道理），然后它就把本地的所有行为带个key扔给服务器来统计，一段时间之后给你个报表。不过Waka做的真的很精准，精确到每一个文件用了多少秒，每一种语言用了多少时间。</p>
</blockquote>
<p><img src="http://7xoosr.com1.z0.glb.clouddn.com/WakaTime.jpg" alt="此处输入图片的描述"></p>
<p>安装和使用都很简单，请参见<strong><a href="https://wakatime.com/help/plugins/sublime-text" target="_blank" rel="noopener">这里</a></strong>。另外一篇比较详细的文章<strong><a href="https://luolei.org/track-your-time/" target="_blank" rel="noopener">时间都去哪了?用RescueTime和WakaTime来记录你的时间</a></strong>,对RescueTime和WakaTime有一个更为详细的叙述，可以一读</p>
<h2 id="四、定制属于自己的快捷键"><a href="#四、定制属于自己的快捷键" class="headerlink" title="四、定制属于自己的快捷键"></a>四、定制属于自己的快捷键</h2><ul>
<li><strong>首先要会使用SublimeText内置的快捷键：</strong></li>
</ul>
<p>比如 <code>Commond Shift P</code> 打开命令面板:例如打开Package Control安装各种插件；可以可以输入Set(Snytax)来改变使用的语言环境，瞬间切换等等。</p>
<ul>
<li>设置快捷键。在SublimeText里</li>
</ul>
<blockquote>
<p>[<br>    { “keys”: [“ctrl+f9”], “command”: “build” },<br>    { “keys”: [“f10”], “command”: “build”, “args”: {“variant”: “Run”} },<br>    { “keys”: [“ctrl+shift+x”], “command”: “toggle_comment”, “args”: { “block”: true } },<br>]</p>
</blockquote>
<p>具体可参见这边文章Sublime Text3 <a href="http://blog.csdn.net/moyan_min/article/details/11530751" target="_blank" rel="noopener">快捷键汇总及设置快捷键配置环境变量</a></p>
<hr>
<h4 id="sublime中的vim模式配置："><a href="#sublime中的vim模式配置：" class="headerlink" title="sublime中的vim模式配置："></a>sublime中的vim模式配置：</h4><p>在Reference-&gt; User Settings 选项，点击进入配置文件编辑状态<br>请添加如下的内容 “ignored_packages”: []<br>然后使用 Ctrl+S 快捷键进行保存，这时候编辑文件，只要按下键盘上的ESC键就可以进入VIM模式了，可以使用VIM的快捷键</p>
<hr>
<p><strong>常用快捷键表</strong></p>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/sublime%E5%BF%AB%E6%8D%B7%E9%94%AE.jpg" alt="此处输入图片的描述"></p>
<h2 id="五、定制属于自己的个性化主题"><a href="#五、定制属于自己的个性化主题" class="headerlink" title="五、定制属于自己的个性化主题"></a>五、定制属于自己的个性化主题</h2><p>我想合适的主题和配色是能够潜在提高工程师效率的重要工具，虽然用白底黑字的记事本也能写出稳固高效的代码，但是为了我们的心情和眼睛，还是选几款好的配色比较好。前端工程师对设计和美学更加敏锐，虽然不是设计师，但我们知道“什么是美的”。在Sublime Text中改变视觉效果有两部分设置，分别是代码高亮的“配色”以及编辑器本身的“主题”（包括了Tab栏、侧边栏以及Command窗口等）。顺便插播一下，最新版本的Sublime Text 3能够指定侧边栏的文件图标了~</p>
<p>记得知乎上有为什么大部分程序员都喜欢用黑色界面这样的问题，嗯…… 不管你使用亮色系还是暗色系的主题（事实上我在不同的编辑器分别用了这两种），下面这几种都非常值得推荐</p>
<p><strong>Material Theme：</strong>非常推荐的主题</p>
<p><strong>9 个最佳的 Sublime Text 2/3 主题</strong></p>
<p><strong><a href="http://kkga.github.io/spacegray/" target="_blank" rel="noopener">Spacegray</a></strong><br><img src="http://static.oschina.net/uploads/img/201409/12070241_RMc4.png" alt="此处输入图片的描述"></p>
<p>一个最小化的设计可以帮你把注意力放在编写代码上，该主题在 UI 上没什么吸引人之处，但很适合编码。</p>
<p><strong><a href="http://ethanschoonover.com/solarized" target="_blank" rel="noopener">Solarized</a></strong></p>
<p><img src="http://static.oschina.net/uploads/img/201409/12070243_tEzd.png" alt="此处输入图片的描述"></p>
<p>非常精确的颜色设置，这些颜色在不同的设备和不同的亮度环境下测试过</p>
<p><strong><a href="http://glaciertheme.com/" target="_blank" rel="noopener">Glacier</a></strong></p>
<p>颜色很丰富，使用流行的扁平设计风格。</p>
<p><img src="http://static.oschina.net/uploads/img/201409/12070244_Gl7v.png" alt="此处输入图片的描述"></p>
<p><strong><a href="http://jamiewilson.io/predawn/" target="_blank" rel="noopener">Predawn</a></strong></p>
<p><img src="http://static.oschina.net/uploads/img/201409/12070246_chdY.png" alt="此处输入图片的描述"></p>
<p>Predawn 非常漂亮，特别适合编写代码。</p>
<p><strong><a href="https://github.com/thinkpixellab/flatland" target="_blank" rel="noopener">Flatland</a></strong></p>
<p><img src="http://static.oschina.net/uploads/img/201409/12070247_2zco.png" alt="此处输入图片的描述"></p>
<p>Flatland 是一个基于 Soda 构建的 Sublime Text 主题，看起来不错</p>
<p><strong><a href="https://github.com/daylerees/colour-schemes/blob/master/sublime/legacy.tmTheme" target="_blank" rel="noopener">Tron Legacy</a></strong></p>
<p><img src="http://static.oschina.net/uploads/img/201409/12070249_PVaA.png" alt="此处输入图片的描述"></p>
<p>Tron 电影迷们可能会喜欢这一款主题，因为颜色相似</p>
<p><strong><a href="http://itsthatguy.com/post/70191573560/sublime-text-theme-itg-flat" target="_blank" rel="noopener">ITG:Flat</a></strong></p>
<p><img src="http://static.oschina.net/uploads/img/201409/12070251_sQge.png" alt="此处输入图片的描述"></p>
<p>另外一个扁平化设计风格主题</p>
<p><strong><a href="https://github.com/chriskempson/tomorrow-theme" target="_blank" rel="noopener">Tomorrow Theme</a></strong></p>
<p><img src="http://static.oschina.net/uploads/img/201409/12070252_MIhr.png" alt="此处输入图片的描述"></p>
<p>Tomorrow 主题颜色丰富，有着强烈的对比</p>
<p><strong><a href="https://github.com/kenwheeler/brogrammer-theme" target="_blank" rel="noopener">Brogrammar</a></strong></p>
<p> <img src="http://static.oschina.net/uploads/img/201409/12070254_kAXO.png" alt="此处输入图片的描述"></p>
<p> 扁平而且性感的设计。</p>
<p>附录参考文章：</p>
<ul>
<li><a href="http://www.xuanfengge.com/practical-collection-of-sublime-plug-in.html" target="_blank" rel="noopener">sublime推荐必备插件</a></li>
<li><a href="http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/" target="_blank" rel="noopener">如何优雅地使用Sublime Text</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="hide pull-left" href="/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/03/14/企业DIV使用频率高的命名方法/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
